<template>
  <el-dialog ref="uploadRef" v-dialogDrag :visible.sync="currentDialogVisible" title="批量导入操作" class="import-dialog-container" width="980px" append-to-body>
    <el-row>
      <el-col :span="10">
        <el-upload :limit="1" :before-upload="beforeUpload" :on-exceed="onExceed" :data="uploadData" :action="serverAction" :on-success="onSuccess" accept=".xlsx" class="upload-demo" drag>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或
            <em>点击上传</em>
          </div>
          <div slot="tip" class="el-upload__tip">只能上传xlsx文件，且不超过2Mb</div>
        </el-upload>
      </el-col>
      <el-col :span="14">
        <el-alert :closable="false" title="可以根据下面红色提示提示，对excel数据做相应调整" type="success" class="alert-msg">
        </el-alert>
        <el-scrollbar :noresize="false" :native="false" wrap-class="scrollbar-wrap">
          <ul class="msg-container">
            <li v-for="(item, index) in msgList" :key="index" class="msg-item" v-html="item">
              {{ index + 1 }}、{{ item }}
            </li>
          </ul>
        </el-scrollbar>
        <div ref="loading"></div>
      </el-col>
    </el-row>

    <span slot="footer" class="dialog-footer">
      <el-button @click="currentDialogVisible = false">取 消</el-button>
      <el-button v-if="isShowTemplateButton" type="success" icon="el-icon-yrt-saomiaoguanli" @click="downLoadTemplate">下载模板</el-button>
      <el-button :loading="isImporting" type="primary" icon="el-icon-yrt-import" @click="startImport">开始导入</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: null
    },
    options: {
      type: Object,
      default: () => {
        return {};
      }
    },
    importData: {
      type: Function,
      default: () => {
        return () => {};
      }
    }
  },
  data () {
    return {
      // 上传附加字段信息
      uploadData: {
        folder: "import"
      },
      // 上传后文件服务器路径
      fileUrl: null,
      // 正在导入
      isImporting: false,
      // 消息内容
      msgList: [],
      // 导入获得消息interval handle
      intervalHandler: null,
      // 显示导入模板按钮
      isShowTemplateButton: true,
      // 导入key
      uploadKey: null
    };
  },
  computed: {
    // 显示窗口
    currentDialogVisible: {
      get: function () {
        return this.visible;
      },
      set: function (val) {
        this.$emit("update:visible", val);
      }
    },
    // api接口地址
    serverAction () {
      return this.common.domain + this.options.url;
    }
  },
  watch: {
    params: {
      handler: function (val) {},
      deep: true
    }
  },
  created () {},
  mounted () {
    this.uploadKey = this.common.getGUID();
  },
  methods: {
    // 开始导入数据
    startImport () {
      this.msgList = [];
      if (!this.fileUrl) {
        this.$message.error("文件未上传成功，无法导入数据！");
        return;
      }
      this.isImporting = true;

      var url = "/api/sys/import/startImport";
      var params = {
        importInfo_Id: this.options.importInfo_Id,
        fileUrl: this.fileUrl,
        fId: this.options.fId, // 外键ID
        uploadKey: this.uploadKey
      };
      this.common.ajax(
        url,
        params,
        res => {
          this.msgList.push(res.msg);
          this.common.showMsg(res);
          this.isImporting = false;
          if (res.statusCode !== 0 && res.statusCode !== -1) {
            this.$message.error("当前操作未结束，请稍等！");
            window.clearInterval(this.intervalHandler);
            this.intervalHandler = false;
            return;
          }
          this.getMsg();
        },
        this.$refs.loading
      );
    },
    // 获得导入消息
    getMsg () {
      // 获得同步消息
      var url = "/api/common/getUploadMsg";
      const params = {
        key: this.uploadKey
      };
      // const ref = this.dataList;
      var callBack = res => {
        if (!res.result) {
          window.clearInterval(this.intervalHandler);
          this.intervalHandler = false;
          if (Array.isArray(res.data)) {
            this.msgList = this.msgList.concat(res.data);
          }
          return;
        }
        if (Array.isArray(res.data)) {
          this.msgList = this.msgList.concat(res.data.filter(item => item !== "-1"));
          const isFinished = res.data.some(item => item && item.indexOf("-1") >= 0);
          if (isFinished) {
            window.clearTimeout(this.intervalHandler);
            this.intervalHandler = null;
            return;
          }
        }
        this.intervalHandler = window.setTimeout(this.getMsg, 1000);
      };
      this.common.ajax(url, params, callBack, this.$refs.loading);
    },

    // 上传前事件
    beforeUpload (file) {
      if (!this.options.url) {
        this.$message.error("未设置服务器地址");
        return false;
      }
      if (!this.options.importInfo_Id) {
        this.$message.error("未设置导入模板");
        return false;
      }
      this.msgList = [];
      this.fileUrl = null;
    },
    // 文件选择超上限
    onExceed (files, fileList) {
      this.$message.error("只能选择一个文件上传，请先删除已经上传的文件！");
    },
    // 文件上传成功
    onSuccess (res, file, fileList) {
      this.common.showMsg(res);
      if (res.result) {
        this.fileUrl = res.data.url;
      }
    },
    // 下载模板
    downLoadTemplate () {
      var url = "/api/sys/import/getImportInfo";
      var params = {
        importInfo_Id: this.options.importInfo_Id
      };
      this.common.ajax(
        url,
        params,
        res => {
          this.common.showMsg(res);
          if (res.result) {
            var url = res.data.templatePath;
            window.open(url);
          }
        },
        this.$refs.loading
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.import-dialog-container {
  ::v-deep .el-upload-list {
    margin-right: 20px;
  }
  ::v-deep .scrollbar-wrap {
    max-height: 400px;
    overflow-x: hidden;
    padding: 0px;
    padding-bottom: 30px !important;
    padding-top: 0px !important;
  }
  .msg-container {
    margin: 0;
    padding: 0;
    .msg-item {
      margin: 0;
      padding: 5px 0;
      word-wrap: break-word;
    }
  }
}
</style>
